<template>
	<view class="info_warp">
		<view class="form_box">
			<view class="listBox">
				<view class="top_tabs">
					<u-tabs :list="list" :is-scroll="false" activeColor="#35c877" :current="current" @change="change"></u-tabs>
				</view>
				<view class="item" v-for="(item, index) in friends" :key="index">
					<view class="userLeft">
						<u-image width="120rpx" height="120rpx" :fade="true" shape="circle" duration="450" :src="item.images"></u-image>
						<view class="userinfo">
							<text class="name">{{item.name}}</text>
							<text class="mobile"><u-icon name="phone-fill" color="#666666" size="28"></u-icon> {{item.mobile}}</text>
							<text class="time">{{item.time}}</text>
						</view>
					</view>
					<view class="level">
						<view class="l_icon" :class="'level_'+item.level"></view>
						市级代理
					</view>
				</view>
			</view>
			<u-empty text="暂无好友数据~" margin-top="100" mode="list" v-if="friends.length === 0"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '服务中心'
				}, {
					name: '区代会员'
				}, {
					name: '市代会员'
				}],
				current: 0,
				friends: [{
					images: '/static/photo/1.jpg',
					name: 'liuyunxh',
					mobile: '19970861797',
					time: '2021-04-23 14:08:33',
					level: '1'
				},
				{
					images: '/static/photo/2.jpg',
					name: 'coolc',
					mobile: '19970861797',
					time: '2021-04-23 14:08:33',
					level: '1'
				},
				{
					images: '/static/photo/3.jpg',
					name: 'liuyunxh',
					mobile: '19970861797',
					time: '2021-04-23 14:08:33',
					level: '2'
				},
				{
					images: '/static/photo/4.jpg',
					name: '晟艺互动',
					mobile: '19970861797',
					time: '2021-04-23 14:08:33',
					level: '6'
				},
				{
					images: '/static/photo/5.jpg',
					name: 'uView',
					mobile: '19970861797',
					time: '2021-04-23 14:08:33',
					level: '5'
				},
				{
					images: '/static/photo/1.jpg',
					name: 'liuyunxh',
					mobile: '19970861797',
					time: '2021-04-23 14:08:33',
					level: '1'
				},
				{
					images: '/static/photo/2.jpg',
					name: 'coolc',
					mobile: '19970861797',
					time: '2021-04-23 14:08:33',
					level: '4'
				},
				{
					images: '/static/photo/3.jpg',
					name: 'liuyunxh',
					mobile: '19970861797',
					time: '2021-04-23 14:08:33',
					level: '6'
				},
				{
					images: '/static/photo/4.jpg',
					name: '晟艺互动',
					mobile: '19970861797',
					time: '2021-04-23 14:08:33',
					level: '3'
				},
				{
					images: '/static/photo/5.jpg',
					name: 'uView',
					mobile: '19970861797',
					time: '2021-04-23 14:08:33',
					level: '2'
				}]
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
	}
	.form_box {
		border-bottom: 20rpx solid #f1f1f1;
	}
	.top_tabs {
		width: 100%;
		padding: 20rpx 0 0 0;
		border-bottom: 2rpx solid #eee;
	}
	.listBox {
		width: 100%;
		
		.item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #ffffff;
			border-radius: 12rpx;
			padding: 26rpx 28rpx;
			border-bottom: 2rpx solid #eee;
			
			&:nth-last-child(1) {
				border-bottom: 0rpx;
			}
			
			.userLeft {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.userinfo {
					padding-left: 24rpx;
					
					.name {
						display: block;
						color: #333333;
						font-size: 28rpx;
					}
					.mobile {
						display: block;
						font-weight: bold;
						padding: 6rpx 0;
						color: #333333;
						font-size: 28rpx;
					}
					.time {
						display: block;
						clear: both;
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
			
			.level {
				width: auto !important;
				display: inline-block;
				margin-top: 8rpx;
				color: #999 !important;
			}
		}
	}
</style>
